<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03计算属性和监视</title>
</head>
<body>
<!--
    1.计算属性
      在computed属性对象中定义计算属性的方法
      在页面中使用{{方法名}}来显示计算的结果
    2.监视属性
      通过vm对象的$watch()或watch配置来监视指定的属性
      当属性变化时，回调函数自动调用，函数内部进行计算
    3.计算属性高级
      通过getter/setter实现对属性数据的显示和监视
      计算属性存在缓存，多次读取只执行一次getter计算s12
 -->
    <div id="demo">
      姓：<input type="text" placeholder="First name" v-model="firstName"><br>
      名：<input type="text" placeholder="Last name" v-model="lastName"><br>
      姓名1(单向)：<input type="text" placeholder="Full name1" v-model="fullName1"><br>
      姓名2(单向)：<input type="text" placeholder="Full name2" v-model="fullName2"><br>
      姓名3(双向)：<input type="text" placeholder="Full name3" v-model="fullName3"><br> <!-- 通过计算属性，实现双向 -->

      <!-- 缓存     -->
      <!-- 获取下面的值时，会先去缓存中找，{key(属性名：fullName1),value(属性值 A B)}     -->
      <p>{{fullName1}}</p>
      <p>{{fullName1}}</p>
      <p>{{fullName1}}</p>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const vm = new Vue({
          el:"#demo",
          data:{
            firstName:"A",
            lastName:"B",
            //fullName1:"A1 B1",  //已通过computed赋值
            fullName2:"A2 B2"
          },
          //计算属性
          computed:{  //计算属性中的一个方法，方法的返回值作为属性值
            //什么时候执行：初始化显示 / 相关的data属性(相关是指 函数中包含的属性)数据发生改变
            //计算并返回当前属性的值
            fullName1() {
              console.log('fullName1()');
              return this.firstName +" "+ this.lastName;
            },
            fullName3:{
              //回调函数满足的三个条件：1.你定义的，2.你没有调用，3.但最终它执行了
              //要知道：1.什么时候调用？，2.用来做什么？
              //回调函数：当需要读取当前属性值时回调， 根据相关的数据计算并返回当前属性的值
              get(){
                  return this.firstName +" "+ this.lastName;
              },
              //回调函数：当属性值发生改变时回调，更新相关属性数据
              set(value){   //value就是fullName3的最新属性值
                  const names = value.split(' ');
                  this.firstName = names[0];
                  this.lastName = names[1];
              }
            }
          },
          watch:{   //监视语法1：配置监视
            firstName: function (value) {   //firstName发生了变化，会对fullName2再次赋值(动态更新)
              console.log(this);  //就是vm对象,会在浏览器控制台显示该vm对象，可以点击查看该属性
              this.fullName2 = value + ' ' + this.lastName;
            }
          }
        });

        //监视语法2
        vm.$watch("lastName",function (newVal,oldVal) {
            //更新fullName2的值
            this.fullName2 = this.firstName + ' '+ newVal;
        })
    </script>
</body>
</html>
